<template>
  <div class="login">
    <h2 style="color: white">宿舍智能监控平台</h2>
    <div class="confirm">
        <h4>欢迎登录</h4>
        <el-input class="input" prefix-icon="el-icon-user" v-model="userid" placeholder="请输入内容"></el-input>
        <el-input class="input" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="password" show-password></el-input>
         <div style="display: flex;flex-direction: row;justify-content: flex-start">
           <el-button type="primary" @click="tologin">登录</el-button>
           <el-button type="primary" @click="toregister">注册</el-button>
         </div>
         <router-link style="text-decoration: none;margin-top: 30px;color: deepskyblue" to="/login">忘记密码</router-link>
    </div>
  </div>


</template>

<script>
export default {
  name: "login",
  data() {
    return {
      userid: '',
      password:''
    }
  },
  methods:{
    tologin(){
      this.$router.push('/main');
    },
    toregister(){
      this.$router.push('/register');
    }
  }
}
</script>

<style scoped>
.login{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  width: 100%;
  background:url("../assets/back.png");
  height:100%;
  position: fixed;
  background-size:100% 100%;
}
.confirm{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 330px;
  box-shadow: 0px 0px 5px #c3c3c3;
  margin-top: 20px;
  background-color: white;
}
.input{
  width: 230px;
  margin-bottom: 25px;
}
</style>
